﻿<template>
  <div class="edge-device">
    <!-- 设备列表 -->
    <div class="device-list glass-card">
      <div class="card-header">
        <h3>🖥️ 边缘设备列表</h3>
        <div class="card-actions">
          <el-button type="primary" class="tech-button" @click="handleRefresh" :loading="loading">
            <i class="el-icon-refresh"></i>
            刷新
          </el-button>
          <el-button type="success" class="tech-button" @click="handleAddDevice">
            <i class="el-icon-plus"></i>
            新增
          </el-button>
        </div>
      </div>
      
      <!-- 搜索和筛选 -->
      <div class="filter-container">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索设备名称..."
          clearable
          class="search-input"
          @clear="handleSearch"
          @keyup.enter="handleSearch"
          size="small">
          <template #prefix>
            <i class="el-icon-search"></i>
          </template>
        </el-input>
        
        <el-select
          v-model="filterState"
          placeholder="状态筛选"
          clearable
          @change="handleSearch"
          size="small"
          class="filter-select">
          <el-option label="全部状态" value=""></el-option>
          <el-option label="在线" value="online"></el-option>
          <el-option label="运行中" value="running"></el-option>
          <el-option label="离线" value="offline"></el-option>
          <el-option label="异常" value="error"></el-option>
        </el-select>
        
        <!-- 设备总数统计 -->
        <div class="total-count">
          共 {{ filteredDevices.length }} 台设备
        </div>
      </div>
      
      <el-table 
        :data="filteredDevices" 
        style="width: 100%"
        class="tech-table"
        :row-class-name="getDeviceRowClass"
        v-loading="loading"
        size="small">
        <el-table-column type="index" label="序号" width="60" align="center">
          <template #default="scope">
            <span class="device-index">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="设备名称" width="200">
          <template #default="scope">
            <div class="device-info">
              <span class="device-icon">🖥️</span>
              <span class="device-name">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.state)" effect="dark" size="small">
              {{ getStatusText(scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="experimentGroupName" label="实验组" width="180">
          <template #default="scope">
            <span v-if="scope.row.experimentGroupName" class="group-name">
              {{ scope.row.experimentGroupName }}
            </span>
            <span v-else class="no-group">未分配</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button 
              size="small" 
              @click="handleViewDevice(scope.row)"
              class="tech-action-btn info">
              详情
            </el-button>
            <el-button 
              size="small" 
              @click="handleEditDevice(scope.row)"
              class="tech-action-btn warning">
              编辑
            </el-button>
            <el-button 
              size="small" 
              @click="handleDeleteDevice(scope.row)"
              class="tech-action-btn danger">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空状态提示 -->
      <div v-if="devices.length === 0 && !loading" class="empty-state">
        <i class="el-icon-files"></i>
        <p>暂无设备数据</p>
      </div>
    </div>

    <!-- 设备详情对话框 -->
    <el-dialog
      title="边缘设备详情"
      v-model="deviceDialogVisible"
      width="500px"
      class="tech-dialog">
      <div v-if="selectedDevice" class="device-detail">
        <div class="detail-section">
          <h4>基本信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <label>设备ID:</label>
              <span>{{ selectedDevice.id }}</span>
            </div>
            <div class="detail-item">
              <label>设备名称:</label>
              <span>{{ selectedDevice.name }}</span>
            </div>
            <div class="detail-item">
              <label>状态:</label>
              <el-tag :type="getStatusType(selectedDevice.state)" effect="dark">
                {{ getStatusText(selectedDevice.state) }}
              </el-tag>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4>配置信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <label>IP地址:</label>
              <span class="ip-address">{{ selectedDevice.ipAddress || '-' }}</span>
            </div>
            <div class="detail-item">
              <label>镜像:</label>
              <span class="image-text">{{ selectedDevice.image || '-' }}</span>
            </div>
            <div class="detail-item">
              <label>实验组:</label>
              <span>{{ selectedDevice.experimentGroupName || '未分配' }}</span>
            </div>
            <div class="detail-item">
              <label>实验组ID:</label>
              <span>{{ selectedDevice.experimentGroupId || '-' }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4>时间信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <label>创建时间:</label>
              <span>{{ formatTime(selectedDevice.createdAt) }}</span>
            </div>
            <div class="detail-item">
              <label>更新时间:</label>
              <span>{{ formatTime(selectedDevice.updatedAt) }}</span>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="deviceDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleEditDevice(selectedDevice)">编辑</el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑设备对话框 -->
     <el-dialog
    :title="isEditing ? '编辑边缘设备' : '新增边缘设备'"
    v-model="editDialogVisible"
    width="500px"
    class="tech-dialog"
    @close="handleEditDialogClose">
    <el-form
      ref="deviceFormRef"
      :model="deviceForm"
      :rules="deviceFormRules"
      label-width="100px"
      size="small">
      <el-form-item label="设备名称" prop="name">
        <el-input 
          v-model="deviceForm.name" 
          placeholder="请输入设备名称，如：边缘网关-路口A"
          clearable 
          class="form-input" />
      </el-form-item>
      
      <el-form-item label="IP地址" prop="ipAddress">
        <el-input 
          v-model="deviceForm.ipAddress" 
          placeholder="请输入IP地址，如：192.168.20.50"
          clearable 
          class="form-input" />
      </el-form-item>
      
      <el-form-item label="镜像版本" prop="image">
        <el-select 
          v-model="deviceForm.image" 
          placeholder="请选择镜像版本" 
          clearable
          style="width: 100%"
          class="form-select">
          <el-option label="edge-gateway:v2.1" value="edge-gateway:v2.1" />
          <el-option label="edge-server:v1.5" value="edge-server:v1.5" />
          <el-option label="edge-runtime:1.0" value="edge-runtime:1.0" />
          <el-option label="edge-runtime:1.1" value="edge-runtime:1.1" />
          <el-option label="edge-runtime:1.2" value="edge-runtime:1.2" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="状态" prop="state">
        <el-select 
          v-model="deviceForm.state" 
          placeholder="请选择设备状态" 
          clearable
          style="width: 100%"
          class="form-select">
          <el-option label="在线" value="online" />
          <el-option label="运行中" value="running" />
          <el-option label="离线" value="offline" />
          <el-option label="异常" value="error" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="实验组" prop="experimentGroupId">
        <el-select 
          v-model="deviceForm.experimentGroupId" 
          placeholder="请选择实验组" 
          clearable
          style="width: 100%"
          class="form-select"
          @change="handleExperimentGroupChange">
          <el-option label="车联网实验组" :value="1" />
          <el-option label="边缘计算实验组A" :value="2" />
          <el-option label="边缘计算实验组B" :value="3" />
          <el-option label="边缘计算实验组C" :value="4" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="editDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmitDevice" :loading="submitting">
        {{ isEditing ? '更新' : '创建' }}
      </el-button>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// API 基础地址 - 使用代理
const API_BASE_URL = '/api'

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const deviceDialogVisible = ref(false)
const editDialogVisible = ref(false)
const selectedDevice = ref(null)
const searchKeyword = ref('')
const filterState = ref('')
const isEditing = ref(false)
const deviceFormRef = ref()

// 实验组映射关系
const experimentGroupMap = reactive({
  1: '车联网实验组',
  2: '边缘计算实验组A',
  3: '边缘计算实验组B',
  4: '边缘计算实验组C'
})

// 设备列表数据
const devices = ref([])

// 计算属性：过滤后的设备列表
const filteredDevices = computed(() => {
  let filtered = devices.value

  // 根据搜索关键词过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(device => 
      device.name.toLowerCase().includes(keyword)
    )
  }

  // 根据状态过滤
  if (filterState.value) {
    filtered = filtered.filter(device => device.state === filterState.value)
  }

  return filtered
})

// 设备表单 - 使用 ref 确保响应式
const deviceForm = ref({
  id: null,
  name: '',
  ipAddress: '',
  image: '',
  state: '',
  experimentGroupName: '',
  experimentGroupId: null
})

// 表单验证规则
const deviceFormRules = {
  name: [
    { required: true, message: '请输入设备名称', trigger: 'blur' },
    { min: 2, max: 50, message: '设备名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  ipAddress: [
    { required: true, message: '请输入IP地址', trigger: 'blur' },
    { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: '请输入正确的IP地址格式', trigger: 'blur' }
  ],
  image: [
    { required: true, message: '请选择镜像版本', trigger: 'change' }
  ],
  state: [
    { required: true, message: '请选择设备状态', trigger: 'change' }
  ],
  experimentGroupId: [
    { required: true, message: '请选择实验组', trigger: 'change' }
  ]
}

// 工具方法
const getStatusType = (status) => {
  const types = {
    online: 'success',
    running: 'warning',
    offline: 'info',
    error: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    online: '在线',
    running: '运行中',
    offline: '离线',
    error: '异常'
  }
  return texts[status] || '未知'
}

const getDeviceRowClass = ({ row }) => {
  return `device-row-${row.state}`
}

const formatTime = (timeString) => {
  if (!timeString) return ''
  return new Date(timeString).toLocaleString('zh-CN')
}

// 实验组选择变化处理
const handleExperimentGroupChange = (groupId) => {
  if (groupId) {
    deviceForm.value.experimentGroupName = experimentGroupMap[groupId] || ''
  } else {
    deviceForm.value.experimentGroupName = ''
  }
}

// 根据实验组ID获取名称
const getExperimentGroupName = (groupId) => {
  return experimentGroupMap[groupId] || ''
}

// 重置表单数据
const resetFormData = () => {
  deviceForm.value = {
    id: null,
    name: '',
    ipAddress: '',
    image: '',
    state: '',
    experimentGroupName: '',
    experimentGroupId: null
  }
}

// API 调用方法 - 强制刷新，不使用缓存
const fetchDevices = async () => {
  loading.value = true
  try {
    console.log('🖥️ 开始请求边缘设备列表...')
    
    // 添加时间戳防止缓存
    const timestamp = new Date().getTime()
    const response = await fetch(`${API_BASE_URL}/edge-devices?t=${timestamp}`, {
      method: 'GET',
      headers: {
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache'
      }
    })
    
    console.log('📡 响应状态:', response.status, response.statusText)
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const result = await response.json()
    console.log('✅ 请求成功:', result)
    
    if (result.code === 200) {
      devices.value = result.data
      ElMessage.success(`成功加载 ${result.data.length} 台边缘设备`)
    } else {
      throw new Error(result.message || '获取数据失败')
    }
    
  } catch (error) {
    console.error('❌ 获取边缘设备列表失败:', error)
    ElMessage.error('获取边缘设备列表失败: ' + error.message)
    devices.value = []
  } finally {
    loading.value = false
  }
}

const createDevice = async (deviceData) => {
  submitting.value = true
  try {
    console.log('📤 发送创建请求:', deviceData)
    
    const response = await fetch(`${API_BASE_URL}/edge-devices`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(deviceData)
    })
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const result = await response.json()
    console.log('✅ 创建响应:', result)
    
    if (result.code === 200) {
      ElMessage.success('边缘设备创建成功')
      return result.data
    } else {
      throw new Error(result.message || '创建失败')
    }
    
  } catch (error) {
    console.error('Error creating device:', error)
    ElMessage.error('创建边缘设备失败: ' + error.message)
    throw error
  } finally {
    submitting.value = false
  }
}

const updateDevice = async (id, deviceData) => {
  submitting.value = true
  try {
    console.log('📤 发送更新请求:', { id, ...deviceData })
    
    const response = await fetch(`${API_BASE_URL}/edge-devices/${id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        ...deviceData,
        id: parseInt(id) // 确保id是数字类型
      })
    })
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const result = await response.json()
    console.log('✅ 更新响应:', result)
    
    if (result.code === 200) {
      ElMessage.success('边缘设备更新成功')
      return result.data
    } else {
      throw new Error(result.message || '更新失败')
    }
    
  } catch (error) {
    console.error('Error updating device:', error)
    ElMessage.error('更新边缘设备失败: ' + error.message)
    throw error
  } finally {
    submitting.value = false
  }
}

const deleteDevice = async (id) => {
  try {
    console.log('🗑️ 发送删除请求:', id)
    
    const response = await fetch(`${API_BASE_URL}/edge-devices/${id}`, {
      method: 'DELETE'
    })
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const result = await response.json()
    console.log('✅ 删除响应:', result)
    
    if (result.code === 200) {
      ElMessage.success('边缘设备删除成功')
      return true
    } else {
      throw new Error(result.message || '删除失败')
    }
    
  } catch (error) {
    console.error('Error deleting device:', error)
    ElMessage.error('删除边缘设备失败: ' + error.message)
    throw error
  }
}

// 事件处理方法
const handleRefresh = () => {
  // 清空搜索和筛选条件，获取全部数据
  searchKeyword.value = ''
  filterState.value = ''
  fetchDevices()
  ElMessage.success('边缘设备列表已刷新')
}

const handleAddDevice = () => {
  isEditing.value = false
  resetFormData()
  editDialogVisible.value = true
  
  // 确保表单在下一次 DOM 更新时重置验证
  nextTick(() => {
    if (deviceFormRef.value) {
      deviceFormRef.value.clearValidate()
    }
  })
}

const handleViewDevice = (device) => {
  selectedDevice.value = device
  deviceDialogVisible.value = true
}

const handleEditDevice = (device) => {
  isEditing.value = true
  selectedDevice.value = device
  
  // 填充表单数据 - 使用 .value 赋值
  deviceForm.value = {
    id: device.id,
    name: device.name || '',
    ipAddress: device.ipAddress || '',
    image: device.image || '',
    state: device.state || '',
    experimentGroupId: device.experimentGroupId || null,
    experimentGroupName: device.experimentGroupName || getExperimentGroupName(device.experimentGroupId)
  }
  
  editDialogVisible.value = true
  
  // 确保表单在下一次 DOM 更新时重置验证
  nextTick(() => {
    if (deviceFormRef.value) {
      deviceFormRef.value.clearValidate()
    }
  })
}

const handleDeleteDevice = async (device) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除边缘设备 "${device.name}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    await deleteDevice(device.id)
    fetchDevices() // 删除后刷新列表
    
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.info('取消删除')
    }
  }
}

const handleSubmitDevice = async () => {
  if (!deviceFormRef.value) return
  
  try {
    // 验证表单
    await deviceFormRef.value.validate()
    
    // 准备 JSON 数据 - 根据API要求的格式
    const formData = {
      name: deviceForm.value.name,
      ipAddress: deviceForm.value.ipAddress,
      image: deviceForm.value.image,
      state: deviceForm.value.state,
      experimentGroupName: deviceForm.value.experimentGroupName,
      experimentGroupId: deviceForm.value.experimentGroupId
    }
    
    console.log('📝 提交表单数据:', formData)
    
    if (isEditing.value) {
      // 编辑时需要包含id
      await updateDevice(deviceForm.value.id, formData)
    } else {
      // 新增不需要id
      await createDevice(formData)
    }
    
    editDialogVisible.value = false
    fetchDevices() // 提交后刷新列表
    
  } catch (error) {
    console.error('Form validation or submission failed:', error)
    // 验证失败时不需要额外提示，Element Plus 会自动显示错误信息
  }
}

const handleEditDialogClose = () => {
  deviceFormRef.value?.clearValidate()
}

const handleSearch = () => {
  // 搜索和筛选现在通过计算属性自动处理
}

onMounted(() => {
  fetchDevices()
})
</script>

<style scoped>
/* 原有的样式保持不变 */
.edge-device {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.device-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.filter-container {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
  align-items: center;
}

.search-input {
  width: 200px;
}

.filter-select {
  width: 120px;
}

.total-count {
  color: #8b9dc3;
  font-size: 12px;
  margin-left: auto;
}

:deep(.el-table) {
  flex: 1;
  background: transparent;
  height: 100%;
}

:deep(.el-table .el-table__cell) {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 0;
}

:deep(.el-table th) {
  background: rgba(255, 255, 255, 0.05);
  color: #8b9dc3;
  font-weight: bold;
  padding: 8px 0;
}

:deep(.el-table tr) {
  background: transparent;
}

:deep(.el-table tr:hover > td) {
  background: rgba(255, 255, 255, 0.05) !important;
}

:deep(.el-table .el-table__body-wrapper) {
  overflow: auto !important;
}

.device-index {
  color: #8b9dc3;
  font-weight: bold;
}

.device-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-icon {
  font-size: 1.1em;
}

.device-name {
  color: #fff;
  font-weight: 500;
  font-size: 13px;
}

.group-name {
  color: #00ff88;
  font-size: 13px;
}

.no-group {
  color: #8b9dc3;
  font-style: italic;
  font-size: 13px;
}

.tech-button {
  background: linear-gradient(45deg, #00f2fe, #4facfe);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 12px;
  height: 28px;
}

.tech-button:hover {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.4);
}

.tech-action-btn {
  border: none;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  padding: 4px 8px;
  margin: 1px;
  height: 24px;
}

.tech-action-btn.info {
  background: linear-gradient(45deg, #00f2fe, #4facfe);
}

.tech-action-btn.warning {
  background: linear-gradient(45deg, #ffd166, #ff9e00);
}

.tech-action-btn.danger {
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #8b9dc3;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

.device-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-section h4 {
  margin: 0 0 12px 0;
  color: #00f2fe;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 4px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-item label {
  font-weight: bold;
  color: #8b9dc3;
  font-size: 12px;
}

.detail-item span {
  color: #fff;
  font-size: 13px;
  word-break: break-all;
}

.ip-address {
  font-family: 'Courier New', monospace;
  color: #00f2fe;
}

.image-text {
  color: #ffd166;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

:deep(.el-dialog.tech-dialog) {
  background: rgba(43, 48, 71, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-dialog.tech-dialog .el-dialog__header) {
  background: rgba(255, 255, 255, 0.05);
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.el-dialog.tech-dialog .el-dialog__title) {
  color: #fff;
  font-size: 16px;
}

:deep(.el-dialog.tech-dialog .el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog.tech-dialog .el-dialog__footer) {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========== 修复表单输入文字显示问题 - 简化版 ========== */
:deep(.el-dialog.tech-dialog .el-form-item__label) {
  color: #8b9dc3 !important;
  font-weight: 500;
}

/* 简化输入框样式 - 使用黑色文字 */
:deep(.el-dialog.tech-dialog .el-input .el-input__inner) {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #000000 !important;
  font-size: 14px !important;
  caret-color: #000000 !important;
}

:deep(.el-dialog.tech-dialog .el-input .el-input__inner:focus) {
  border-color: #00f2fe !important;
  box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.2) !important;
}

:deep(.el-dialog.tech-dialog .el-input .el-input__inner::placeholder) {
  color: #666666 !important;
  font-size: 12px !important;
}

/* 简化选择框样式 - 使用黑色文字 */
:deep(.el-dialog.tech-dialog .el-select .el-input .el-input__inner) {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #000000 !important;
  font-size: 14px !important;
  caret-color: #000000 !important;
}

/* 修复选择框下拉选项 */
:deep(.el-select-dropdown) {
  background: #ffffff !important;
  border: 1px solid #dcdfe6 !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

:deep(.el-select-dropdown__item) {
  color: #606266 !important;
  font-size: 14px !important;
}

:deep(.el-select-dropdown__item:hover) {
  background: #f5f7fa !important;
}

:deep(.el-select-dropdown__item.selected) {
  color: #00f2fe !important;
  background: #f0f9ff !important;
  font-weight: 500 !important;
}

/* 修复选择框选中标签的文字颜色 */
:deep(.el-dialog.tech-dialog .el-select .el-tag) {
  color: #000000 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #dcdfe6 !important;
}

:deep(.el-dialog.tech-dialog .el-select .el-tag .el-tag__close) {
  color: #000000 !important;
  background: transparent !important;
}

/* 修复浏览器自动填充样式 */
:deep(.el-dialog.tech-dialog input:-webkit-autofill) {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
}

/* 修复清除图标 */
:deep(.el-dialog.tech-dialog .el-input__clear) {
  color: #666666 !important;
}

:deep(.el-dialog.tech-dialog .el-input__clear:hover) {
  color: #00f2fe !important;
}

/* 修复选择框下拉图标 */
:deep(.el-dialog.tech-dialog .el-select .el-input__suffix .el-icon) {
  color: #666666 !important;
}

:deep(.el-dialog.tech-dialog .el-select .el-input__suffix .el-icon:hover) {
  color: #00f2fe !important;
}

/* 修复表单验证信息 */
:deep(.el-dialog.tech-dialog .el-form-item__error) {
  color: #ff6b6b !important;
  font-size: 12px;
  padding-top: 4px;
}

/* 修复按钮样式 - 确保取消按钮不透明 */
:deep(.el-dialog.tech-dialog .el-button) {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #333333 !important;
  font-weight: 500;
}

:deep(.el-dialog.tech-dialog .el-button:hover) {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #00f2fe !important;
  color: #000000 !important;
}

:deep(.el-dialog.tech-dialog .el-button--primary) {
  background: linear-gradient(45deg, #00f2fe, #4facfe) !important;
  border: none !important;
  color: #ffffff !important;
}

:deep(.el-dialog.tech-dialog .el-button--primary:hover) {
  background: linear-gradient(45deg, #4facfe, #00f2fe) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.4);
}

/* 修复输入框在禁用状态下的样式 */
:deep(.el-dialog.tech-dialog .el-input.is-disabled .el-input__inner) {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: #666666 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 修复选择框在禁用状态下的样式 */
:deep(.el-dialog.tech-dialog .el-select.is-disabled .el-input__inner) {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: #666666 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 修复选择框下拉菜单的空状态 */
:deep(.el-select-dropdown__empty) {
  color: #999999 !important;
  font-size: 14px !important;
}

/* 修复选择框分组标题 */
:deep(.el-select-group__title) {
  color: #909399 !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
}

/* 为表单元素添加特定样式 */
.form-input :deep(.el-input__inner) {
  color: #000000 !important;
}

.form-select :deep(.el-input__inner) {
  color: #000000 !important;
}

/* 强制覆盖所有输入元素的文字颜色 */
:deep(.el-dialog.tech-dialog input),
:deep(.el-dialog.tech-dialog textarea) {
  color: #000000 !important;
}

/* 确保对话框内容区域的文字颜色 */
:deep(.el-dialog.tech-dialog .el-dialog__body) {
  color: #ffffff !important;
}

/* 修复表单描述文字 */
:deep(.el-dialog.tech-dialog .el-form-item__content .el-form-item__description) {
  color: #8b9dc3 !important;
  font-size: 12px !important;
}
:deep(.el-table .el-table__cell:last-child) {
  background: transparent !important;
}

:deep(.el-table .el-table__cell:last-child .cell) {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

/* 确保操作按钮容器无背景 */
:deep(.el-table .tech-action-btn) {
  margin: 0;
  flex-shrink: 0;
}

/* 修复固定列的背景问题 */
:deep(.el-table__fixed-right) {
  background: transparent !important;
}

:deep(.el-table__fixed-right::before) {
  background: transparent !important;
}

:deep(.el-table__fixed-right .el-table__fixed-body-wrapper) {
  background: transparent !important;
}

:deep(.el-table__fixed-right .el-table__cell) {
  background: transparent !important;
}

/* 确保表格行hover时操作列也跟随变化 */
:deep(.el-table tr:hover .el-table__cell:last-child) {
  background: rgba(255, 255, 255, 0.05) !important;
}
</style>